<template>
  <van-tabbar :modelValue="value" :fixed="false" :safe-area-inset-bottom="safeAreaInsetBottom" :route="route" :before-change="checkLogin">
    <van-tabbar-item name="home" to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="search" to="/list" icon="search">标签</van-tabbar-item>
    <van-tabbar-item name="user" to="/user" icon="manager-o">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { Base64 } from 'js-base64'
import qs from 'qs'
import Cookies from 'js-cookie'

export default defineComponent({
  name: 'IndexTabbar',
  props: {
    value: {
      type: [String, Number],
    },
    route: {
      type: Boolean,
      default: true
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: true
    }
  },
  setup (props, { emit }) {
    const isLogin = ref(false)
    const { value, route, safeAreaInsetBottom } = toRefs(props)

    isLogin.value = Cookies.get('x-basement-token') && Cookies.get('OP_ID')
    const checkLogin = (name) => {
      return true
      if (name === 'search') {
        if (!isLogin.value) {
          const params = qs.stringify({
            appid: 'H5D9B674D',
            title: '代码演示库',
            fromUrl: encodeURIComponent(`${window.location.origin}/msite/list`)
          })
          const state = Base64.encode(params, true)
          window.location.href = `https://admin.jsvue.cn/html/m-login.html?state=${state}`
        }
        return isLogin.value
      } else if (name === 'user') {
        if (!isLogin.value) {
          const params = qs.stringify({
            appid: 'H5D9B674D',
            title: '代码演示库',
            fromUrl: encodeURIComponent(`${window.location.origin}/msite/user`)
          })
          const state = Base64.encode(params, true)
          window.location.href = `https://admin.jsvue.cn/html/m-login.html?state=${state}`
        }
        return isLogin.value
      } else return true
    }
    return {
      value,
      route,
      safeAreaInsetBottom,
      checkLogin
    }
  }
})
</script>
<style lang="less" scoped>
.van-tabbar {
  :deep(.van-tabbar-item) {
    &__icon {
      margin-bottom: 2px;
    }
    &__text {
      font-size: 14px;
    }
  }
}
</style>
